<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2024-12-22 14:54:17
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-01-08 15:41:42
 * @FilePath: \Backstage\WebsiteUI\src\views\blog\config\index.vue
-->
<template>
  <div class="blog-container-warp">
    <div class="blog-title">BLOG 项目配置</div>
    <div class="center-warp">
      <el-form :model="state.form" ref="formRef" :rules="rules" label-width="150px" :inline="false" size="default" v-loading="state.viewLoading">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="网页标题:" prop="title" :rules="rules.blur">
              <el-input v-if="state.isEdit" style="width: 100%" v-model="state.form.title"></el-input>
              <span class="value" :style="{ color: state.form.title ? '#409eff' : '#ccc' }" v-else>{{ state.form.title || '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="BLOG 地址:" prop="blogUrl" :rules="rules.blur">
              <el-input v-if="state.isEdit" style="width: 100%" v-model="state.form.blogUrl"></el-input>
              <span class="value" :style="{ color: state.form.blogUrl ? '#409eff' : '#ccc' }" v-else>{{ state.form.blogUrl || '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="后台管理地址:" prop="bsUrl" :rules="rules.blur">
              <el-input v-if="state.isEdit" style="width: 100%" v-model="state.form.bsUrl"></el-input>
              <span class="value" :style="{ color: state.form.bsUrl ? '#409eff' : '#ccc' }" v-else>{{ state.form.bsUrl || '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="后端服务地址:" prop="bsServerUrl" :rules="rules.blur">
              <el-input v-if="state.isEdit" style="width: 100%" v-model="state.form.bsServerUrl"></el-input>
              <span class="value" :style="{ color: state.form.bsServerUrl ? '#409eff' : '#ccc' }" v-else>{{ state.form.bsServerUrl || '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="静态资源地址前缀:" prop="assetsPrefix" :rules="rules.blur">
              <el-input v-if="state.isEdit" style="width: 100%" v-model="state.form.assetsPrefix"></el-input>
              <span class="value" :style="{ color: state.form.assetsPrefix ? '#409eff' : '#ccc' }" v-else>{{ state.form.assetsPrefix || '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="域名备案号:" prop="domainBeian" :rules="rules.blur">
              <el-input v-if="state.isEdit" style="width: 100%" v-model="state.form.domainBeian"></el-input>
              <span class="value" :style="{ color: state.form.domainBeian ? '#409eff' : '#ccc' }" v-else>{{ state.form.domainBeian || '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="网站公安备案号:" prop="webBeian">
              <el-input v-if="state.isEdit" style="width: 100%" v-model="state.form.webBeian"></el-input>
              <span class="value" :style="{ color: state.form.webBeian ? '#409eff' : '#ccc' }" v-else>{{ state.form.webBeian || '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="背景图片最大长度:" prop="bgImgMaxLen" :rules="rules.blur">
              <el-input v-if="state.isEdit" style="width: 100%" v-model="state.form.bgImgMaxLen"></el-input>
              <span class="value" :style="{ color: state.form.bgImgMaxLen ? '#409eff' : '#ccc' }" v-else>{{ state.form.bgImgMaxLen || '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否展示输入入口:" prop="showEntry" :rules="rules.blur">
              <el-switch
                :style="{ marginLeft: state.isEdit ? '0' : '20px' }"
                :disabled="!state.isEdit"
                :active-value="'true'"
                :inactive-value="'false'"
                active-text="展示"
                inactive-text="隐藏"
                v-model="state.form.showEntry"></el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="是否展示 APP下载:" prop="appDownload" :rules="rules.blur">
              <el-switch
                :style="{ marginLeft: state.isEdit ? '0' : '20px' }"
                :disabled="!state.isEdit"
                :active-value="'true'"
                :inactive-value="'false'"
                active-text="展示"
                inactive-text="隐藏"
                v-model="state.form.appDownload"></el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="分页效果" prop="pageType" :rules="rules.blur">
              <el-switch
                :style="{ marginLeft: state.isEdit ? '0' : '20px' }"
                :disabled="!state.isEdit"
                :active-value="'page'"
                :inactive-value="'more'"
                active-text="分页"
                inactive-text="按钮"
                v-model="state.form.pageType"></el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="24" style="margin-top: 40px; display: flex; justify-content: flex-end">
            <el-form-item>
              <el-button v-if="!state.isEdit" type="primary" @click="handleEdit">编 辑</el-button>
              <el-button v-else type="primary" v-loading="state.submitLoading" @click="onSubmit">提 交</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getBlogProjectConfig, updateBlogProjectConfig } from '@/api/projectConfig';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';

const formRef = ref(null);
const rules = {
  blur: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  change: [{ required: true, message: '请选择内容', trigger: 'change' }]
};
const state = reactive({
  form: {
    title: '',
    assetsPrefix: '',
    blogUrl: '',
    bsUrl: '',
    bsServerUrl: '',
    bgImgMaxLen: '',
    domainBeian: '',
    webBeian: '',
    showEntry: 'false',
    appDownload: 'false',
    pageType: 'more'
  },
  isEdit: false,
  viewLoading: false,
  submitLoading: false
});

// 获取项目配置
const getBlogProjectConfigFn = () => {
  state.viewLoading = true;
  getBlogProjectConfig()
    .then(res => {
      if (res.code == 200) {
        state.form = res.data;
        state.form.pageType = res.data.pageType === 'page' ? 'page' : 'more';
      }
    })
    .finally(() => {
      state.viewLoading = false;
    });
};
getBlogProjectConfigFn();

// 修改项目配置
const onSubmit = () => {
  formRef.value.validate(valid => {
    if (valid) {
      state.submitLoading = true;
      updateBlogProjectConfig(state.form)
        .then(res => {
          if (res.code == 200) {
            state.isEdit = false;
            ElMessage.success('修改成功');
            getBlogProjectConfigFn();
          }
        })
        .finally(() => {
          state.submitLoading = false;
        });
    } else {
      console.log('error submit');
      return false;
    }
  });
};

const handleEdit = () => {
  state.isEdit = true;
};
</script>

<style lang="scss" scoped>
.blog-container-warp {
  width: 100%;
  height: 100%;
  padding: 20px;
  .center-warp {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  .blog-title {
    width: 100%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    line-height: 60px;
    border-bottom: 1px solid #eee;
  }
  .el-form {
    border: 1px solid #eee;
    padding: 20px 20px 0px 20px;
    margin-top: 20px;
    .el-form-item {
      margin-bottom: 30px;
      .value {
        padding: 0 0 0 20px;
        text-wrap: nowrap;
      }
    }
  }
}
</style>
